<div class="left">
  <el-card class="box-card" :body-style="{ padding: '10px' }">
    <div class="content-box">
      <div class="box-title">基础组件</div>
      <div class="box-list">
        <!-- 在线视频 -->
        <div class="item" @click="handleAdd('videoDiy')">
          <img class="icon" src="/assets/addons/wdsxh/img/icon/video.png">
          <div class="name">在线视频</div>
        </div>
        <!-- 图片轮播 -->
        <div class="item" @click="handleAdd('carouselDiy')">
          <img class="icon" src="/assets/addons/wdsxh/img/icon/carousel.png">
          <div class="name">图片轮播</div>
        </div>
        <!-- 单图组 -->
        <div class="item" @click="handleAdd('imagesDiy')">
          <img class="icon" src="/assets/addons/wdsxh/img/icon/images.png">
          <div class="name">单图组</div>
        </div>
        <!-- 导航组 -->
        <div class="item" @click="handleAdd('navDiy')">
          <img class="icon" src="/assets/addons/wdsxh/img/icon/nav.png">
          <div class="name">导航组</div>
        </div>
        <!-- 图片魔方 -->
        <div class="item" @click="handleAdd('cubeDiy')">
          <img class="icon" src="/assets/addons/wdsxh/img/icon/cube.png">
          <div class="name">图片魔方</div>
        </div>
        <!-- 信息卡片 -->
        <div class="item" @click="handleAdd('infoCardDiy')">
          <img class="icon" src="/assets/addons/wdsxh/img/icon/infoCard.png">
          <div class="name">信息卡片</div>
        </div>
        <!-- 文字按钮 -->
        <div class="item" @click="handleAdd('textButtonDiy')">
          <img class="icon" src="/assets/addons/wdsxh/img/icon/textButton.png">
          <div class="name">文字按钮</div>
        </div>
        <!-- 文章 -->
        <div class="item" @click="handleAdd('articleDiy')">
          <img class="icon" src="/assets/addons/wdsxh/img/icon/article.png">
          <div class="name">文章</div>
        </div>
        <!-- 广告组件 -->
        <div class="item" @click="handleAdd('adDiy')">
          <img class="icon" src="/assets/addons/wdsxh/img/icon/ad.png">
          <div class="name">广告组件</div>
        </div>
        <!-- 标题单元 -->
        <div class="item" @click="handleAdd('titleUnitDiy')">
          <img class="icon" src="/assets/addons/wdsxh/img/icon/titleUnit.png">
          <div class="name">标题单元</div>
        </div>
        <!-- 图文按钮 -->
        <div class="item" @click="handleAdd('buttonDiy')">
          <img class="icon" src="/assets/addons/wdsxh/img/icon/button.png">
          <div class="name">图文按钮</div>
        </div>
        <!-- 地图 -->
        <div class="item" @click="handleAdd('mapDiy')">
          <img class="icon" src="/assets/addons/wdsxh/img/icon/map.png">
          <div class="name">地图</div>
        </div>
      </div>
      <div class="box-title">工具组件</div>
      <div class="box-list">
        <!-- 标题 -->
        <div class="item" @click="handleAdd('titleDiy')">
          <img class="icon" src="/assets/addons/wdsxh/img/icon/title.png">
          <div class="name">标题</div>
        </div>
        <!-- 辅助线条 -->
        <div class="item" @click="handleAdd('lineDiy')">
          <img class="icon" src="/assets/addons/wdsxh/img/icon/line.png">
          <div class="name">辅助线条</div>
        </div>
        <!-- 广播 -->
        <div class="item" @click="handleAdd('noticeDiy')">
          <img class="icon" src="/assets/addons/wdsxh/img/icon/notice.png">
          <div class="name">广播</div>
        </div>
        <!-- 辅助空白 -->
        <div class="item" @click="handleAdd('blankDiy')">
          <img class="icon" src="/assets/addons/wdsxh/img/icon/blank.png">
          <div class="name">辅助空白</div>
        </div>
        <!-- 文本组 -->
        <div class="item" @click="handleAdd('textDiy')">
          <img class="icon" src="/assets/addons/wdsxh/img/icon/text.png">
          <div class="name">文本组</div>
        </div>
        <!-- 背景音乐 -->
        <div class="item" @click="handleAdd('bgmDiy')">
          <img class="icon" src="/assets/addons/wdsxh/img/icon/bgm.png">
          <div class="name">背景音乐</div>
        </div>
        <!-- 富文本 -->
        <div class="item" @click="handleAdd('richTextDiy')">
          <img class="icon" src="/assets/addons/wdsxh/img/icon/richText.png">
          <div class="name">富文本</div>
        </div>
        <!-- 警告提示 -->
        <div class="item" @click="handleAdd('warnDiy')">
          <img class="icon" src="/assets/addons/wdsxh/img/icon/warn.png">
          <div class="name">警告提示</div>
        </div>
        <!-- 时间线 -->
        <div class="item" @click="handleAdd('timelineDiy')">
          <img class="icon" src="/assets/addons/wdsxh/img/icon/timeline.png">
          <div class="name">时间线</div>
        </div>
        <!-- 悬浮按钮 -->
        <div class="item" @click="handleAdd('floatDiy')">
          <img class="icon" src="/assets/addons/wdsxh/img/icon/float.png">
          <div class="name">悬浮按钮</div>
        </div>
      </div>
    </div>
  </el-card>
</div>